<template>
    <div class="transform-layout">
        <div class="header">
            <el-tabs v-model="activeName">
                <el-tab-pane v-for="(val, key) in tabList" :key="key" :label="val" :name="key"> </el-tab-pane>
            </el-tabs>
        </div>
        <component :is="componentId" :key="activeName"></component>
    </div>
</template>

<script lang="tsx">
import { defineComponent } from 'vue';
// 定义name专用script标签
// eslint-disable-next-line vue/component-definition-name-casing
export default defineComponent({ name: 'MEMBER_POINT_ORDER_TRANSFORM' });
</script>

<script lang="tsx" setup>
import { ref, reactive, computed, defineAsyncComponent } from 'vue';

const activeName = ref('setting');
const tabList = reactive({
    setting: '达人订单转换',
    records: '转换记录'
});
const components = reactive({
    setting: defineAsyncComponent(() => import('./components/setting/index.vue')),
    records: defineAsyncComponent(() => import('./components/records/index.vue'))
});
const componentId = computed(() => {
    return components[activeName.value];
});
</script>
<style lang="scss" scoped>
.transform-layout {
    height: calc(100vh - 142px);
    background: #fff;
    border: 1px solid #eaeaea;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    .header {
        :deep {
            .el-tabs__ {
                &header {
                    margin: 0;
                }

                &nav-scroll {
                    padding: 0 24px;
                }

                &item {
                    height: 56px;
                    line-height: 56px;
                    font-size: 16px;
                    font-family: PingFangSC-Medium, 'PingFang SC';
                    font-weight: 500;
                }
            }
        }
    }

    & > div:nth-of-type(2) {
        flex: 1;
        padding: 24px;
    }
}
</style>
